<template>
  <div class="home-wrap">
    <div class="img-wrap"></div>
    <div class="footer">
      <ul class="left">
        <li>
          <span>客服电话: </span>
          <span>18644920537</span>
        </li>
        <li>
          <span>公司地址: </span>
          <span>长春市净月开发区小合台工业区3号地金城街488号201室</span>
        </li>
      </ul>
      <div class="right">
        <div>
          <img class="w_logo" src="../assets/images/w_logo.png" />
          <span>官方微信</span>
        </div>
        <img class="wechat" src="../assets/images/wechat.jpg" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      showImg: false
    }
  }
}
</script>
<style lang="scss">
  .home-wrap {
    box-sizing: border-box;
    height: calc(100vh - 60px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #E4E4E4;
    .img-wrap {
      flex: 1;
      margin: 40px;
      // width: 100%;
      // height: 100%;
      background-image: url('../assets/images/home_bac.png');
      background-size: 100% 100%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .footer {
      display: flex;
      justify-content: center;
      // height: 150px;
      padding: 10px 0;
      background-color: #fff;
      .left {
        color: #999;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .right {
        position: relative;
        display: flex;
        align-items: center;
        margin-left: 30px;
        div {
          display: flex;
          // padding: 10px;
          padding-left: 30px;
          align-items: center;
          flex-direction: column;
          border-left: 1px solid #eee;
          cursor: pointer;
        }
        .wechat {
          position: absolute;
          left: -12px;
          top: -150px;
          height: 150px;
          width: 150px!important;
          max-width: 150px!important;
          display: none;
        }
        &:hover {
          .wechat {
            display: block;
          }
        }
      }
    }
  }
</style>
